<template>
    <div style="margin-left: 20px;">
        <div style="display: flex; margin-top: 20px;">
            <el-input style="width: 250px;" v-model="username"></el-input>

            <el-button type="primary" style="margin-left: 30px;" @click="selectlist">
                <el-icon><Search /></el-icon>查询
            </el-button>
            <el-button type="success">
                <el-icon><Upload /></el-icon>导出
            </el-button>
        </div>

        <div style="margin-top: 20px;">
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="userId" label="员工id" width="120" />
                <el-table-column prop="userName" label="员工姓名" width="120" />
                <el-table-column prop="departmentName" label="员工部门" width="120" />
                <el-table-column prop="positionName" label="员工职位" width="120" />
                <el-table-column prop="basicWage" label="基础工资" width="120" />
                <el-table-column prop="bonus" label="奖金" width="120" />
                <el-table-column prop="assistance" label="补助" width="120" />
                <el-table-column prop="fiveInsurances" label="五险一金" width="120" />
                <el-table-column fixed="right" label="操作" min-width="120">
                    <template #default="scope">
                        <el-button  type="success" :icon="EditPen"  @click="edit(scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div style="display: flex; justify-content: flex-end; margin-top: 16px; margin-right: 150px;">
                <el-pagination 
                    @size-change="sizeChange" 
                    @current-change="currentChange" 
                    :current-page="CurrentPage"
                    :page-sizes="[1, 5, 10]" 
                    :page-size="size" 
                    background 
                    layout="total,sizes,prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>

        <el-dialog v-model="centerDialogVisible" title="工资修改" width="500" center>
            <el-form v-model="DataChange">
                <el-form-item label="基础工资">
                    <el-input v-model="DataChange.basicWage"></el-input>
                </el-form-item>

                <el-form-item label="奖金">
                    <el-input v-model="DataChange.bonus"></el-input>
                </el-form-item>

                <el-form-item label="补助">
                    <el-input v-model="DataChange.assistance"></el-input>
                </el-form-item>

                <el-form-item label="五险一金">
                    <el-input v-model="DataChange.fiveInsurances"></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="centerDialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="update">确定</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { GET, POST } from '../../../api';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search, Plus, Delete, Download, Upload, EditPen } from '@element-plus/icons-vue'

let CurrentPage = ref(1), size = ref(10), username = ref(""), total = ref(0)
let tableData = ref([])

// 查询列表函数
async function selectlist() {
    let res = await GET('http://localhost:9999/Salary/selectPage', {
        page: CurrentPage.value,
        size: size.value,
        userName: username.value
    })
    tableData.value = res.data.list
    total.value = res.data.total
}

// 修改当前页
function currentChange(_page) {
    CurrentPage.value = _page
    selectlist()
}

// 修改每页大小
function sizeChange(_size) {
    size.value = _size
    CurrentPage.value = 1
    selectlist()
}

let centerDialogVisible = ref(false)
let DataChange = ref({
    basicWage: "",
    bonus: "",
    assistance: "",
    fiveInsurances: "",
    userId: ""
})

// 编辑按钮点击事件
async function edit(row) {
    // 展示弹窗
    centerDialogVisible.value = true
    // 将选中的行数据赋值到 DataChange 中
    DataChange.value = { ...row }
}

// 更新操作
async function update() {
    console.log(DataChange.value)
    let res = await POST('http://localhost:9999/Salary/update', DataChange.value)
    if(res.data != 0) {
        ElMessage.success("修改成功")
        centerDialogVisible.value = false
        selectlist()
    }
}

onMounted(async () => {
    await selectlist()
})
</script>
